<template>
  <div>
    <el-button type="primary" plain @click="toCheck">审核</el-button>


    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="商户ID">
      </el-table-column>
      <el-table-column
        prop="name"
        label="商户名称">
      </el-table-column>
      <el-table-column
        prop="corporation"
        label="法人">
      </el-table-column>
      <el-table-column
        label="地址">
        <template slot-scope="scope">
          {{ scope.row.provinceName }}
          {{ scope.row.cityName }}
          {{ scope.row.countyName }}
          {{ scope.row.address }}
        </template>
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
<!--        <template slot-scope="scope">-->
<!--          <span v-if="scope.row.type==1">-->
<!--            公司-->
<!--          </span>-->
<!--          <span v-if="scope.row.type==0">-->
<!--            个体-->
<!--          </span>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">待审核</span>
          <span v-if="scope.row.status==1">审核通过</span>
          <span v-if="scope.row.status==2">审核不通过</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="管理员">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="申请时间">
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="formData" :model="formData" :rules="rules" size="small" label-width="100px"
               label-position="right">
        <el-form-item label="商家类型" prop="type">
          <el-input v-model="formData.type==0?'个体':'公司化'" readonly :disabled='true' prefix-icon='el-icon-more'
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="商家名称" prop="name">
          <el-input v-model="formData.name" readonly :disabled='true' prefix-icon='el-icon-s-flag'
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="法人" prop="corporation">
          <el-input v-model="formData.corporation" placeholder="请输入法人" readonly :disabled='true'
                    prefix-icon='el-icon-user' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="省" prop="provinceName">
          <el-input v-model="formData.provinceName" placeholder="请输入省" readonly :disabled='true'
                    prefix-icon='el-icon-s-promotion' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="市" prop="cityName">
          <el-input v-model="formData.cityName" placeholder="请输入市" readonly :disabled='true'
                    prefix-icon='el-icon-s-promotion' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="县" prop="countyName">
          <el-input v-model="formData.countyName" placeholder="请输入县" readonly :disabled='true'
                    prefix-icon='el-icon-s-promotion' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="formData.address" placeholder="请输入详细地址" readonly :disabled='true'
                    prefix-icon='el-icon-s-promotion' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-input v-model="formData.status=='0'?'未审核':formData.status=='1'?'已审核':'审核失败'" placeholder="请输入状态"
                    readonly
                    :disabled='true'
                    prefix-icon='el-icon-check' :style="{width: '100%'}">
          </el-input>
        </el-form-item>
        <el-form-item label="管理员" prop="username">
          <el-input v-model="formData.username" placeholder="请输入管理员" readonly :disabled='true'
                    prefix-icon='el-icon-s-custom' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="统一征信码" prop="certNum">
          <el-input v-model="formData.certNum" placeholder="请输入统一征信码" readonly :disabled='true'
                    prefix-icon='el-icon-info' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item>
          <span v-if="formData.headPicture">
          <img v-if="formData.headPicture" :src="formData.headPicture" class="avatar">
          </span>
        </el-form-item>
        <el-form-item label="申请时间" prop="createTime">
          <el-input v-model="formData.createTime" placeholder="请输入申请时间" readonly :disabled='true'
                    prefix-icon='el-icon-document' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="check(1)">通过</el-button>
          <el-button type="primary" @click="check(2)">不通过</el-button>
          <el-button @click="goBack">返回</el-button>
          <!--          <el-button @click="resetForm">重置</el-button>-->
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.pageNum"
        :page-sizes="[1,3,10, 20, 50, 100]"
        :page-size="queryForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :page-count="pages">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getBusinessList, getBusMsg, upStatus} from "../../../api/system/business";
import {getInfo} from "@/api/login";

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        type: undefined,
        name: undefined,
        corporation: undefined,
        provinceName: undefined,
        cityName: undefined,
        countyName: undefined,
        address: undefined,
        status: undefined,
        username: undefined,
        certNum: undefined,
        createTime: undefined,
      },
      rules: {},
      open: false,
      title: '审核',
      total: 0,
      updateStatus: {
        id: undefined,
        status: undefined,
      },
      pages: 0,
      tableData: [{}],
      queryForm: {
        pageNum: 1,
        pageSize: 3,
      },
      idList: [],

    }
  },
  computed: {},
  watch: {},
  created() {
    this.businessList();
  },
  mounted() {
  },
  methods: {

    check(val) {
      this.updateStatus.status = val;
      this.updateStatus.id = this.idList[0];
      console.log(this.updateStatus);
      upStatus(this.updateStatus).then(res => {
        console.log(res);
        if (res.flag) {
          this.$message.success("审核成功！");
          this.open = false;
          this.queryForm.pageNum = 1;
          this.businessList();
        } else {
          this.$message.error("审核失败！");
        }
      })
    },
    businessList() {
      getBusinessList(this.queryForm).then(res => {
        console.log(res);
        let msgData = res.msgData;
        console.log(msgData);
        this.tableData = msgData.list;
        this.pages = msgData.pages;
        this.total = msgData.total;
      })
    },
    goBack() {
      this.resetForm();
      this.open = false;
    },

    submitForm() {
      this.$refs['formData'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['formData'].resetFields();
    },
    toCheck() {
      let length = this.idList.length;
      if (length < 1) {
        this.$message.error("您尚未选择任何商户！");
      } else if (length > 1) {
        this.$message.error("审核只能选择一位商户！");
      } else {
        console.log(this.idList[0]);
        getBusMsg(this.idList[0]).then(res => {
          console.log(res);
          this.formData = res.msgData;
          let status = res.msgData.status;
        })
        this.open = true;
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.idList = val.map(row => row.id);
      console.log(this.idList);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryForm.pageSize = val;
      this.queryForm.pageNum = 1;
      this.businessList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryForm.pageNum = val;
      this.businessList();
    },
  }
}

</script>
<style>

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

</style>
